import React from 'react'
import { List, Avatar, Row, Col } from 'antd';
import style from './index.module.css'
/**
 * 展示一条商品信息的组件，用于我的订单、提交订单等页面
 * @param {*} data 
 * @param {*} size 
 * @returns 
 */
const large = (data,size)=>{
  const { name, image, price, totalPrice, count } = data
  return(
    <List.Item>
    <List.Item.Meta
      avatar={<Avatar shape="square" size={size} src={image} />}
      title={<Row>
        <Col span={20} className={style.foodtitle}>{name}</Col>
        <Col span={4} className={style.totalPrice}>¥{totalPrice}</Col>
      </Row>}
      description={
        <Row style={{ 'width': '200px' }}>
          <Col span={12}>
            单价：¥{price}
          </Col>
          <Col span={12}>
            数量：{count}
          </Col>
        </Row>
      }
    />
  </List.Item>
  )
}
const small = (data,size)=>{
  const { productImage, productName, productPrice, totalPrice, count } = data;
  return (
<List.Item>
      <List.Item.Meta
        avatar={<Avatar shape="square" size={size} src={productImage} />}
        title={<Row>
          <Col span={20} className={style.foodtitle}>{productName}</Col>
          <Col span={4} className={style.totalPrice}>¥{totalPrice}</Col>
        </Row>}
        description={
          <Row style={{ 'width': '200px' }}>
            <Col span={12}>
              单价：¥{productPrice}
            </Col>
            <Col span={12}>
              数量：{count}
            </Col>
          </Row>
        }
      />
    </List.Item>
  )
}
export default function OrderFoodItem(props) {
  const { size,data } = props;
  return (
   size===128?large(data,size):small(data,size)
  )
}
